<template>
	<!-- 首页中间的项目卡片部分 -->
	<view class="indexBodyCard2">
		<view class="font1">{{ propsData.name }}</view>
		<view class="date1">
			{{ createDate }}
		</view>
		<view class="font2">
			<view class="font2-1">创建人:</view>
			<view class="font2-2">{{ usersName }}</view>
		</view>

		<view class="input">
			<view class="input1">合同金额</view>
			<view class="input2">{{ propsData.investmentAmount.toFixed(2) }}￥</view>
		</view>
		<view class="output">
			<view class="output1">材料成本</view>
			<view class="output2">{{ warehouseCost.toFixed(2) }}￥</view>
		</view>
		<view class="cost">
			<view class="cost1">毛利润：</view>
			<view class="cost2">{{ profit.toFixed(2) }}￥</view>
		</view>
		<!-- 备注 -->
		<view class="font3">
			<view class="font3-1">项目介绍:</view>
			<view class="font3-2">{{ propsData.introduce }}</view>
		</view>
	</view>
</template>

<script>
import { request } from '../../request';
export default {
	computed: {
		profit() {
			return this.propsData.investmentAmount - this.warehouseCost;
		},
		createDate() {
			return new Date(this.propsData.createTime).toISOString().split('T')[0];
		},
		warehouseCost() {
			return this.propsData.publicCost + this.propsData.cashCost + this.propsData.credit + this.propsData.purchaseContractTax;
		},
		userName() {}
	},
	data() {
		return {
			usersName: null
		};
	},
	mounted() {
		request('public/selectUserById', { id: this.propsData.users }, 'GET').then((res) => {
			if (res.data.code != 200) {
				this.$message.error('   ' + res.data.msg);
				return;
			}
			this.usersName = res.data.data.name;
		});
	},
	props: {
		propsData: {
			type: Object
		}
	}
};
</script>

<style scoped>
.contentBodyCard:hover {
	transform: translate(-460rpx) translateY(-8rpx);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* 卡片头部样式 */
.indexBodyCard2 {
	padding: 40rpx;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.font1 {
	font-size: 36rpx;
	font-weight: 600;
	color: #333333;
	margin-bottom: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.font1::before {
	content: '📂';
	margin-right: 16rpx;
	font-size: 28rpx;
}

.date1 {
	font-size: 24rpx;
	color: #888888;
	margin-bottom: 32rpx;
	display: flex;
	align-items: center;
}

.date1::before {
	content: '📅';
	margin-right: 12rpx;
	font-size: 20rpx;
}

/* 信息行通用样式 */
.font2,
.cost,
.input,
.output {
	display: flex;
	align-items: center;
	margin-bottom: 24rpx;
	padding: 16rpx 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.font2-1,
.cost1,
.input1,
.output1 {
	width: 180rpx;
	font-size: 26rpx;
	color: #666666;
	display: flex;
	align-items: center;
}

.font2-2,
.cost2,
.input2,
.output2 {
	font-size: 28rpx;
	color: #333333;
	font-weight: 500;
}

/* 图标样式 */
.font2-1::before {
	content: '👤';
	margin-right: 12rpx;
	font-size: 22rpx;
}

.cost1::before {
	content: '💰';
	margin-right: 12rpx;
	font-size: 22rpx;
}

.input1::before {
	content: '📥';
	margin-right: 12rpx;
	font-size: 22rpx;
}

.output1::before {
	content: '📤';
	margin-right: 12rpx;
	font-size: 22rpx;
}

/* 盈利数字颜色 */
.cost2 {
	color: #27ae60;
}

/* 输入输出行样式调整 */
.input,
.output {
	margin-bottom: 0;
}

.input1,
.output1 {
	color: #666666;
}

.input2,
.output2 {
	color: #333333;
}

/* 卡片底部装饰 */
.contentBodyCard::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 6rpx;
	background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.contentBodyCard:hover::after {
	transform: scaleX(1);
}

/* 新增项目介绍样式 */
.font3 {
	margin-top: 24rpx;
	padding-top: 24rpx;
	border-top: 1px solid #f1f5f9;
	display: flex;
	flex-direction: column;
}

.font3-1 {
	font-size: 28rpx;
	color: #475569;
	margin-bottom: 12rpx;
	font-weight: 500;
	display: flex;
	align-items: center;
}

.font3-1::before {
	content: '📝';
	margin-right: 12rpx;
	font-size: 24rpx;
}

.font3-2 {
	font-size: 26rpx;
	color: #334155;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
</style>
